<template>
  <div style="margin:0 auto; width: 80%">
    <el-table
      :data="data.slice((pagination.currentPage-1) * pagination.pagesize, pagination.currentPage
    * pagination.pagesize)" style="width: 96%; margin: 0 auto; border-radius: 10px"
      height="510px"
    >
      <el-table-column
        prop="userid"
        label="客户ID"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="客户名"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="transactionaddress"
        label="地址"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="userphone"
        label="手机号"
        width="200"
      ></el-table-column>
      <el-table-column
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="当前已选择买家,是否切换买家？"
            v-if="!flag&&cIndex!==(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
            @cancel=""
            @confirm="reChange(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
          >
            <el-button
              v-bind:type="data[pagination.pagesize * (pagination.currentPage - 1) + scope.$index].flag?'danger': 'success'"
              slot="reference"
            >
              {{data[pagination.pagesize * (pagination.currentPage - 1) + scope.$index].flag?"撤销": "出售"}}
            </el-button>
          </el-popconfirm>
          <el-button
            v-bind:type="data[pagination.pagesize * (pagination.currentPage - 1) + scope.$index].flag?'danger': 'success'"
            v-on:click="change(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
            slot="reference"
            v-if="flag||cIndex===(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
          >
            {{data[pagination.pagesize * (pagination.currentPage - 1) + scope.$index].flag?"撤销": "出售"}}
          </el-button>
          <el-button
            type="success"
            v-on:click="change(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
            slot="reference"
            v-if="!flag&&cIndex===(pagination.pagesize * (pagination.currentPage - 1) + scope.$index)"
          >
            交易成功
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right; position: relative; right: 5%;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next, jumper"
        :current-page="pagination.currentPage"
        :page-size="pagination.pagesize"
        :total="data.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "customBuy",
  model:{
    prop: ['data']
  },
  props: ['data'],
  data() {
    return {
      styleClass: {
        freeze: {
          "background-color": "#4CAF50"
        },
        unfreeze: {
          "background-color": "red"
        }
      },
      pagination : {
        currentPage: 1,
        pagesize: 7,
        list: []
      },
      flag: true,
      cIndex: 999999,
    }
  },
  methods:{
    change: function (index) {
      this.data[index].flag = !this.data[index].flag;
      if (this.flag) {
        this.flag = false;
        this.cIndex = index;
      }
    },
    reChange: function (index) {
      for(var i = 0; i < this.data.length; i ++) {
        this.data[i].flag = false;
      }
      this.data[index].flag = true;
      this.cIndex = index;
    },
    handleSizeChange(val) {
      this.pagination.pagesize = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    handList: function () {
      this.pagination.list = this.data;
    }
  },
  created() {
    // alert(this.data.slice((this.pagination.currentPage-1)*this.pagination.pagesize,this.pagination.currentPage*this.pagination.pagesize))
    // this.handList()

  }
}
</script>

<style scoped>
table.title{
  position: fixed;
  width: 98%;
  height: 10%;
  margin: 0 auto;
  top: 0;
  background-color: #037bd2;
}
button.title_button{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
}
td{
  border-style: none;
  font-family: "Microsoft YaHei",serif;
}
span{
  text-align: center;
}
img {
  border-radius: 20px;
  width: 100px;
  height: 100px;
}
#imglist img{
  float: left;
}
.left:hover{
  background-color: slategrey;
}
a.astyle{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.astyle:hover{
  color: lightgray;
}
input.dj{
  width: 40%;
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.dj:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
  border: none;
}
.but1 {
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.but1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
}
td{
  margin: 0 auto;
  margin-top: 5%;
}

.table {
  margin: 0 auto;
  border: 2px solid steelblue;
  text-align: center;
  width: 1000px;
  /*height: 600px;*/
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px 10px 0 0;
  line-height: 50px;
}
.tr1 {
  background: steelblue;
  border-radius: 10px;
  border: 2px solid steelblue;
  color: white;
  font-family: "Microsoft Himalaya", sans-serif;
  text-align: center;
}
.tr2 {
  background: white;
  font-family: "Microsoft Himalaya", sans-serif;
  color: #4F4F4F;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0);
}
.tr2:hover {
  background: rgba(220, 220, 220, 1);
}
</style>
